<template>
  <div
    class="left-nav sidebar-menu-con"
    :class="{'left-nav-small': smallMenu}"
  >
    <transition name="slide-fade">
      <div>
        <div class="layout-logo-left">
          <img
            v-show="smallMenu"
            src="../assets/images/login-icon.jpg"
            style="display: inline-block;"
          />
          <img
            v-show="!smallMenu"
            src="../assets/images/logo-nav.png"
            style="display: inline-block;"
          />
        </div>
        <Menu
          v-show="smallMenu"
          ref="menu"
          :active-name="activeName"
          class="left-nav-menu left-nav-menu-small"
          :width="'100%'"
          theme="dark"
        >
          <Menu-item
            v-for="(item, index) in smallMenuList"
            :key="index"
            :name="`${item.parentMenuName}-${item.menuName}`"
            @click.native="selectMenu(item,item.parentMenuName)"
          >
            <Tooltip :content="item.menuName" placement="right" transfer theme="light">
              <Icon :type="item.iconCls" size="24"></Icon>
            </Tooltip>
          </Menu-item>
        </Menu>
        <Menu
          v-show="!smallMenu"
          ref="menu"
          class="left-nav-menu"
          :active-name="activeName"
          :open-names="openNames"
          :width="'200px'"
          theme="dark"
        >
          <Submenu
            v-for="(item, index) in menuList"
            :key="index"
            :name="item.menuName"
          >
            <template slot="title">
              <Icon :type="item.iconCls" size="18"></Icon>
              {{ item.menuName }}
            </template>

            <Menu-item
              v-for="(subItem, subIndex) in item.children"
              :key="subIndex"
              :name="`${item.menuName}-${subItem.menuName}`"
              @click.native="selectMenu(subItem,item.menuName)"
            >
              <Icon :type="subItem.iconCls" size="18"></Icon>
              {{ subItem.menuName }}
            </Menu-item>
          </Submenu>
        </Menu>
      </div>
    </transition>
  </div>
</template>
<script>
import { menuList, smallMenuList } from '@/common/constValue.js';
export default {
  data() {
    let activeName = sessionStorage.getItem('curMenu') ? sessionStorage.getItem('curMenu') : menuList[0].menuName +'-'+ menuList[0].children[0].menuName;
    let openNames = sessionStorage.getItem('curMenu') ? sessionStorage.getItem('curMenu').split('-')[0] : menuList[0].menuName;
    return {
      smallMenu: localStorage.getItem('smallMenu') === 'Y',
      smallMenuList: smallMenuList,
      menuList: menuList,
      activeName: activeName,
      openNames:[openNames],
    };
  },
  watch: {
    $route() {
      let routerInfo = this.smallMenuList.filter(item => {
        return item.path === this.$route.path;
      })
      if(routerInfo && routerInfo.length>0) {
        routerInfo = routerInfo[0];        
        this.activeName = routerInfo.parentMenuName +'-'+routerInfo.menuName;
        this.openNames = [routerInfo.parentMenuName];
      }
      
    }
  },
  created() {
    
  },
  mounted() {

  },
  methods: {
    toggleMenu(val) {
      this.smallMenu = val;
    },
    // 选择菜单 用于资源权限控制
    selectMenu(data = {},parentMenuName) {
      const { path = '',menuName='', menuCode = ''} = data;
      sessionStorage.setItem('curMenu',parentMenuName+'-'+menuName);
      this.$router.push({ path: path, query: { menuCode,menuName,parentMenuName }});
    }
  }
};
</script>
<style scoped lang="less">
.left-nav {
  height: 100vh;
  width: 200px;
  background: #191a23;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  position: relative;
  .layout-logo-left {
    height: 63px;
    line-height: 63px;
    text-align: center;
    overflow: hidden;
    img {
      vertical-align: middle;
    }
  }
  .nav-arrow {
    position: absolute;
    right: -20px;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
  }
  .left-nav-menu {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .left-nav-menu-small {
    .ivu-menu-item {
      margin-left: 0;
    }
  }
}
.ivu-menu-dark,
.ivu-menu,
.ivu-menu-submenu,
.ivu-menu-submenu .ivu-menu-submenu-title,
.ivu-menu-submenu-title:hover,
.ivu-menu-opened,
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened {
  background: #191a23;
}
ul.ivu-menu {
  overflow-y: auto;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}
</style>
<style lang="less">
.left-nav.left-nav-small {
  width: 60px;
  .layout-logo-left {
    width: 60px;
    // height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 30px;
      height: 30px;
    }
  }
  .left-nav-menu {
    top: 60px;
  }
  .ivu-menu-vertical .ivu-menu-item,
  .ivu-menu-vertical .ivu-menu-submenu-title {
    padding: 6px 0;
    text-align: center;
    .ivu-menu-submenu-title-icon {
      display: none;
    }
    i {
      margin-right: 0;
      font-size: 20px;
    }
  }
  .ivu-menu-item {
    margin-left: -30px;
  }
}
.ivu-menu-submenu-title,
.ivu-menu-submenu-title:hover {
  background: #191a23 !important;
}
</style>
